<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">功能</BreadcrumbItem>
			    <BreadcrumbItem href="/wechats/function/reply">自动回复</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<Tabs :value="activeTabs" @on-click="changeTab">
			        <TabPane label="关键词回复" name="keyword" style="padding-left: 1px;">
			        	<Keyword ref="keyword"></Keyword>
			        </TabPane>
			        <TabPane label="默认回复" name="default" style="padding-left: 1px;">
			        	<Other ref="default"></Other>
			        </TabPane>
			        <TabPane label="关注回复" name="follow" style="padding-left: 1px;">
			        	<Other ref="follow"></Other>
			        </TabPane>
			    </Tabs>
		    </div>
		</div>
	</div>
</template>
<script>
	import {Breadcrumb,Tabs} from 'view-design';

	import Keyword from 'admin/components/wechat/function/reply/keyword';
    import Other from 'admin/components/wechat/function/reply/other';

	export default{
		components:{
            Breadcrumb,
            'BreadcrumbItem' : Breadcrumb.Item,
            'TabPane' : Tabs.Pane,
            Tabs,
            Keyword,
            Other,
        },
        data () {
            return {
            	activeTabs : 'keyword'
            }
        },
        methods:{
        	changeTab(name){
                this.activeTabs = name;
                this.$refs[name].init(name);
        	}
        },
        mounted :function(){
        	var type = this.$route.query.type;
            if(type==undefined){
                type = 'keyword';
            }
        	this.changeTab(type);

        	this.$store.dispatch('CHANGE_ROUTE',{name:'自动回复',route:'/wechat/function/reply',action:1,closable:true});
        }
	}
</script>